<template>
  <view class="layout layout-column">
    <van-sticky>
      <van-nav-bar
        :placeholder="true"
        title="点检"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-icon name="scan" @click="onScan" size="26px" />
        </template>
      </van-nav-bar>
      <van-search
        v-model="search.equipKeyword"
        placeholder="请输入搜索关键词"
        :show-action="showAction"
        reverse-color
        @search="getListInfo(1)"
        @cancel="onCancel"
        @focus="() => (showAction = true)"
      />
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <van-card v-for="item in list" :key="item.id">
        <template #title>
          <div class="title">
            {{ item.equipName
            }}{{ item.equipCode ? "【" + item.equipCode + "】" : "" }}
          </div>
        </template>
        <template #desc>
          <div class="item">
            <span>设备分类:</span> {{ item.classifyName
            }}{{ item.classifyCode ? "【" + item.classifyCode + "】" : "" }}
          </div>
          <div class="item"><span>所属部门:</span> {{ item.factoryName }}</div>
          <div class="item">
            <span>点检频率:</span> {{ item.pointFrequency }}
          </div>
          <div class="item">
            <span>上次点检时间:</span> {{ item.recentCheckTime }}
          </div>
          <div class="item">
            <span>计划点检时间:</span> {{ item.nextPointCheckTime }}
          </div>
        </template>
        <template #footer>
          <van-button @click="onClick(item)" type="primary" size="small"
            >点检</van-button
          >
        </template>
      </van-card>
    </van-list>
  </view>
</template>
  
  <script>
import { getCheckList } from "@/api/home.js";
import { mapMutations } from "vuex";
import { Notify, Toast } from "vant";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      showAction: false,
      value: "",
      search: {
        equipKeyword: "",
        classifyId: "", // 设备分类主键
        current: 1, //	当前页
        factoryId: "", // 所属部门
        size: 15, // 每页的数量
        column: "",
        orderBy: "desc", // 'desc,asc'
      },
      list: [],
      pages: 0,
      total: 0,
    };
  },
  onShow() {
    this.getListInfo(1);
  },
  mounted() {
    uni.$on("scancode", (code) => {
      this.search.equipKeyword = code;
      this.getListInfo(1);
    });
  },
  methods: {
    ...mapMutations(["setDataRow"]),
    /* 获取页面数据 */
    async getListInfo(page) {
      if (page) this.search.current = page;
      if (+page === 1) this.list = [];
      this.loading = true;
      const res = await getCheckList({ ...this.search });
      if (res.code === 200) {
        const list = [];
        res.data.list.filter((item) => {
          list.push(item);
        });
        this.list = this.list.concat(list); // 去重 合并
        const hash = {};
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          hash[curVal.id]
            ? ""
            : (hash[curVal.id] = true && preVal.push(curVal));
          return preVal;
        }, []);
        this.total = res.data.total;
        this.loading = false;
        if (+this.list.length === +this.total) {
          this.finished = true;
        }
      }
    },
    //   触底加载
    onLoad() {
      if (this.list.length < this.search.current) {
        this.finished = true;
        return;
      }
      if (this.list.length === this.total) {
        this.finished = true;
        return;
      }
      let num;
      num = this.search.current;
      num++;
      this.getListInfo(num);
    },
    back() {
      history.back();
    },
    onClick(item) {
      this.setDataRow(item);
      uni.navigateTo({
        url: `./check?id=${item.id}`,
      });
    },
    onCancel() {
      this.showAction = true;
      this.getListInfo(1);
    },
    onScan() {
      uni.navigateTo({
        url: `./scancode`,
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
</style>
  